import React, { useState, FC, useEffect } from 'react'
import { connect } from 'dva'
import { formatTimestamp, locationCode } from '@/utils'
import { Button, Tabs, Select, Modal, message, Form } from 'antd'
import { icon } from '@/config'

import FilterTemp from '../components/filter'
import ListTemp from '../components/list2'
import pageConfig from '../config/pageConfig'
const { namespace, pageName } = pageConfig
const { confirm } = Modal

interface PageProps {}

const Page: FC<PageProps> = (props: any) => {
    const {
        actions,
        [namespace]: {
            spinning,
            filterCondition,
            fields,
            formFields,
            pagination,
            list,
            selectedRowKeys,
            confirmLoading,
        },
    }: any = props
    const [form] = Form.useForm()
    // 筛选组件参数
    const filterProps = {
        spinning,
        filterCondition,
        onSearch: (payload: any) => {
            actions.handleSearch({
                ...payload,
            })
        },
        onReset: () => {
            actions.handleSearch({})
        },
    }
    const handleRowSelectChange = (selectedRowKeys: any, selectedRows: any) => {
        actions.updateKeysRows({ selectedRowKeys, selectedRows })
    }

    const listProps = {
        actions,
        spinning,
        fields,
        pagination,
        list,
        formFields,
        confirmLoading,
        onChange: (page: any, filter: any) => {
            const { current, pageSize } = page

            let payload: any = {
                pn: current,
                ps: pageSize,
            }

            actions.fetchList(payload)
        },
        // rowSelection: {
        //   selectedRowKeys,
        //   onChange: (rowKeys: any, rows: any) => handleRowSelectChange(rowKeys, rows),
        // },
    }

    return (
        <>
            <FilterTemp {...filterProps} />
            <h2 className='commonTit' style={{ display: 'inline', lineHeight: '32px' }}>
                数据列表
            </h2>
            <Button type='primary' style={{ float: 'right' }} onClick={}>
                新建组织
            </Button>
            <ListTemp {...listProps} />
        </>
    )
}

// 配置model
const mapStateToProps = (props: any) => {
    return {
        [namespace]: props[namespace],
    }
}

// 处理状态
const mapDispatchToProps = (dispatch: any) => {
    return {
        actions: {
            handleSearch(payload: any) {
                dispatch({
                    type: `${namespace}/updateState`,
                    payload: {
                        filterParams: payload,
                    },
                })
                dispatch({
                    type: `${namespace}/fetchList`,
                    payload: {
                        ...payload,
                        pn: 1,
                        ps: 10,
                    },
                })
            },
            fetchList(payload: any) {
                dispatch({
                    type: `${namespace}/fetchList`,
                    payload,
                })
            },
            // 添加同步
            fetchSyncAdd(payload: any, callback: any) {
                dispatch({
                    type: `${namespace}/fetchSyncAdd`,
                    payload,
                    callback,
                })
            },

            // 更新选中的keys
            updateKeysRows(payload: any) {
                dispatch({
                    type: `${namespace}/updateKeysRows`,
                    payload,
                })
            },
        },
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(Page)
